<template>
    <div class="login">
        <div class="login-con">
            <!-- 顶部切换 -->
            <ul class="menu-tab">
                <!-- 先用index保证没有定义报错问题 -->
                <li v-for="(item, index) in menuData" :key="'item' + index" :class="{ current: item.current }"
                    @click="clickMenu(item)">
                    {{ item.txt }}
                </li>
            </ul>

            <!-- 表单部分 -->
            <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
                class="demo-ruleForm">
                <!-- 邮箱  修改prop属性 -->
                <el-form-item prop="username" class="item-from">
                    <!-- 修改邮箱样式 双向绑定数据 -->
                    <label for="username">邮箱</label>
                    <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
                </el-form-item>
                <!--密码  设置密码长度限制 -->
                <el-form-item prop="password" class="item-from">
                    <label for="password">密码</label>
                    <el-input v-model="ruleForm.password" type="password" autocomplete="off" id="password" minlength="6"
                        maxlength="20" />
                </el-form-item>

                <el-form-item prop="passwords" class="item-from" v-show="model === 'register'">
                    <label>重复密码</label>
                    <el-input v-model.number="ruleForm.passwords" type="password" autocomplete="off" minlength="6"
                        maxlength="20" />
                </el-form-item>
                <!-- 按钮 -->
                <el-form-item>
                    <el-button @click="submitForm(ruleFormRef)" type="danger" class="login-btn block" :disabled="btnbool">{{
                        model === "login" ?
                        "登录" : "注册" }}</el-button>
                </el-form-item>
            </el-form>
            <!-- 表单部分结束 -->
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, watch } from "vue";
// 导入element-plus
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";

// 导入验证方法
import * as verification from "../../util/verification"
// 导入的封装的api
import link from "../../util/api";
import useMd5 from "../../../hooks/useMd5"
import { useRouter } from 'vue-router'
const router = useRouter()
// 创建变量
const menuData = reactive([
    { txt: "登录", current: true, type: "login" },
    { txt: "注册", current: false, type: "register" },
]);
const model = ref("login");
// 声明函数
// 切换模块  点击切换登录注册模块 先设置一个any
const clickMenu = (data: any) => {
    menuData.forEach((elem) => {
        elem.current = false;
    });
    // 选中状态
    data.current = true;
    // 修改模块值
    model.value = data.type;
};

// 失去焦点验证邮箱格式
const checkUser = (rule: any, value: any, callback: any) => {
    // 创建邮箱正则来进行邮箱格式校验 
    if (!value) {
        return callback(new Error("邮箱不能为空！！"));
    } else if (verification.verificationEmail(value)) { //调用封装的验证邮箱方法来验证
        return callback(new Error("邮箱格式有误！！"));
    } else {
        callback();
    }
};

// 绑定在节点上 获取的节点
const ruleFormRef = ref<FormInstance>();
// 失去焦点验证密码格式
const validatePass = (rule: any, value: any, callback: any) => {

    if (value === "") {
        callback(new Error("密码不能为空"));
    } else if (verification.verificationPwd(value)) { //调用封装的验证密码方法来验证
        callback(new Error("密码格式有误!6至15位的字母+数字"));
    } else {
        callback();
    }
};
// 密码重复性验证
const validatePass2 = (rule: any, value: any, callback: any) => {
    // 如果是登录模块 就跳出
    if (model.value === 'login') { callback(); }
    if (value === "") {
        callback(new Error("重复密码不能为空"));
    } else if (value !== ruleForm.password) {
        callback(new Error("两次密码必须相同"));
    } else {
        callback();
    }
};;
// 输入框内容
const ruleForm = reactive({
    username: "",
    password: "",
    passwords: "",
});

// 触发验证设置 当触发失去焦点事件的时候 做对应的数据验证
const rules = reactive({
    password: [{ validator: validatePass, trigger: "blur" }],
    passwords: [{ validator: validatePass2, trigger: "blur" }],
    username: [{ validator: checkUser, trigger: "blur" }],
});

//重置表单
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}


// 1、登录注册的点击事件 触发  2、发起axios请求  3、把输入框的数据发送给后台
const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (!valid) {
            console.log('error submit!')
            return false
        }

        // 判断是登录还是注册 登录就直接登录 注册就把注册的数据打包发送
        if (model.value == "login") {
            // console.log("登录操作成功");
            console.log("111222");
            link(`/register?username=${ruleForm.username}&password=${useMd5(ruleForm.password)}`, "GET").then((ok: any) => {
                console.log(ok, "111");
                let { data } = ok
                console.log(data, "2222");
                if (data.length != 0) {
                    ElMessage({
                        message: '登陆成功！',
                        type: 'success',
                    })
                    resetForm(ruleFormRef.value)
                    let obj = {
                        id: data[0].id,
                        username: data[0].username,
                        power: data[0].power
                    }
                    localStorage.setItem('user', JSON.stringify(obj))
                    router.push('/home')
                } else {
                    ElMessage({
                        message: '用户名或密码错误！',
                        type: 'error',
                    })
                }
            })


        } else {
            // 把要发送的数据拼装成一个对象 然后发起请求 把要请求的数据发过去
            let data = {
                username: ruleForm.username,
                // 调用加密方法传入加密 然后用.value来获取
                password: useMd5(ruleForm.password),
            };
            // 有内容才发起请求  前缀已经在baseurl中配置好了
            // link("/register", "POST", data).then((ok) => {
            link('/register', "POST", data).then((ok: any) => {
                // 判断数据是否为空 不为空表示不存在可以注册，则注册成功
                // 结构data
                console.log(ok);
                let { data } = ok
                // 转成成数组判断长度即可知道对象是否为空
                if (Object.keys(data).length != 0) {
                    ElMessage("注册成功！即将跳转登录页")
                    // 注册成功切换model至登录页
                    model.value = "login"
                    menuData.forEach((elem) => {
                        elem.current = false;
                    });
                    // 打开登录的开关 允许做登录操作
                    menuData[0].current = true;
                } else {
                    ElMessage.error("注册失败")
                }
            });
        }


    });
};
// 控制按钮是否可点击的开关
let btnbool = ref(true)
// 通过监听model.value来判断是否可点击
watch(ruleForm, (newval: any) => {  //加了个any类型
    // console.log(newval, "表单提交的内容")
    // 判断是登录还是注册
    if (model.value == 'login') {
        // 登录 用户名和密码不为空
        if (newval.username != "" && newval.password != "") {
            btnbool.value = false
        } else {
            btnbool.value = true
        }
    } else {
        // 注册 内容不为空
        if (newval.username != "" && newval.password != "" && newval.passwords != "") {
            btnbool.value = false
        } else {
            btnbool.value = true
        }
    }
})
onMounted(() => {
    console.log("挂载钩子", process.env.VUE_APP_FUYINGTANG);
})
</script>
<style lang="scss">
.login {
    background-color: #000066; //深蓝色
    height: 100%;
}

html,
body,
#app {
    //设置页面100%高
    height: 100%;
}

// 设置切换样式开始
.login-wrap {
    width: 330px;
    margin: auto;
}

.menu-tab {
    text-align: center;

    li {
        display: inline-block;
        width: 88px;
        line-height: 36px;
        font-size: 14px;
        color: #fff;
        border-radius: 2px;
        cursor: pointer;
    }

    .current {
        background-color: rgba(255, 255, 255, 0.5); //白色半透明
    }
}

// 设置切换样式结束

// 表单样式
.demo-ruleForm {
    width: 30%;
    margin: 50px auto;

    label {
        display: block;
        margin-bottom: 3px;
        font-size: 14px;
        color: #fff;
    }

    .item-from {
        margin-bottom: 13px;
    }

    .block {
        display: block;
        width: 100%;
    }

    .login-btn {
        margin-top: 19px;
    }
}

// 表单样式
</style>